<html><head>
    <title></title>
    <meta charset="utf-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="./css/reset.css">
  
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/jquery-1.6.1.min.js"></script>
    <script src="js/howler.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"  type="text/javascript"></script>
    <script src="http://h5.cailianxinwen.com/wxjson/js/wxapi-wm.js"  type="text/javascript"></script>
    <style>
      .confetti {
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 1000;
        pointer-events: none;
        transform: translate3d(0, 0, 0);
      }
      .confetti.show {
        opacity: 1;
        pointer-events: auto;
      }
      .confetti-piece {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        background: #ffc107;
        border-radius: 50%;
      }
      .fade {

      }
       
      @keyframes fadeInOut {
        0% {
          opacity: 0; /* 动画开始时透明度为0（淡出） */
        }
        50% {
          opacity: 1; /* 动画中间时透明度为1（淡入） */
        }
        100% {
          opacity: 0; /* 动画结束时透明度为0（淡出） */
        }
      }
    </style>
<style>
  .f24{ font-family:"微软雅黑";color: #ff6600;}
</style>
    <style>
      
        body {
  background-image: url('images/nine/bg08.jpg'); /* 替换为你的图片路径 */
  background-size: 100% 100%; /* 背景图片覆盖整个页面 */
  background-repeat: no-repeat; /* 背景图片不重复 */

  top:0;
  left:0;
  right:0;
  bottom: 0;
}
#mask {

  background-image: url('images/ten/bg10.jpg'); /* 替换为你的图片路径 */
  background-size: 100% 100%; /* 背景图片覆盖整个页面 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#mask1 {
  
  background-image: url('images/eleven/bg11.jpg'); /* 替换为你的图片路径 */
  background-size: 100% 100%; /* 背景图片覆盖整个页面 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#mask2 {
  
  background-image: url('images/eleven/31.png'); /* 替换为你的图片路径 */
  background-size: 100% 100%; /* 背景图片覆盖整个页面 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.clickable-image {

  transition: transform 0.1s ; /* 添加变换动画 */
  
}
 
.clickable-image:active {
  transform: scale(0.9); /* 缩放图片到90%大小 */
}
.random-image {
  width: 50%;
  position: absolute;
  opacity: 0; /* 初始透明度设置为0 */
  animation: fadeInOut 2s infinite; /* 应用淡入淡出动画 */
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
    </style>
  </head>
<script>
  document.body.scrollTop=0;
  document.documentElement.scrollTop=0
</script>
<script>
  // 初始化一个音频类，src资源可以是本地的有额可以是服务器上的
  var sound1 = new Howl({
    src: ['https://h5.cailianxinwen.com/h5call/lz.MP3'],
    autoplay: true,
    loop: true,
    preload: true,
  })
 
  // 音频资源 load 之后通过微信桥接触发播放
  sound1.on('load', () => {
    window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
      sound1.play()
    }, false)
  })
 
</script>
  <body style="background-color:#f1f1f1;">
    <audio loop="loop" src="lz.MP3" id="media" preload="preload"></audio>
    <!-- 遮罩层 -->
<div id="mask" style="display: none;">

    <div style="font-size: 22px;display: flex;flex-direction: column;margin-top: 50px;">
      <div style="display: flex;justify-content: space-around;">
        <div style="display: flex;border: 2px solid #ff6600;border-radius: 5px;padding: 0 10px;align-items: center;justify-content: center;width: 36%;">
          <div class="f24">倒计时:</div>
          <div id="countdown" style="color: #ff6600;">10</div>
        </div>
        <div style="display: flex;border: 2px solid #ff6600;border-radius: 5px;padding: 0 10px;align-items: center;justify-content: center;width: 36%;">
          <div class="f24">打CALL:</div>
        <div id="num" style="color: #ff6600;">0</div>
        </div>
      </div>
<div>
    <img src="images/ten/25.png" style="position: absolute;
    bottom: 20px;
    right: 50px;width:60px" class="clickable-image">


</div>

    </div>
    <canvas id="fireworks-canvas"></canvas>    
</div>
<div id="mask1" style="display: none;">
  <div style="margin-top: 100px;
    position: absolute;
    display: flex;
    justify-content: center;
  
    width: 100%;">
 <img src="images/eleven/28.png" style="min-width: 320px;width:320px">

</div>
<div style="position: absolute;    margin-top: 179px;;font-size: 28px;width: 100%;text-align: center;" id="cnum">0</div>

<div style="display: flex;flex-direction: column;justify-content: center;width: 100%;text-align: center;color: #fff;
font-size: 18px;position: absolute;
    margin-top: 368px;">
  <div>
    您是第<span id="person" style="font-weight: bold;font-size: 20px;"></span>位打CALL者
  </div>
  <div style="margin-top: 10px;">邀请好友一起为吉林妇女十四大打CALL</div>
  <div style="display: flex;justify-content: space-evenly;margin-top: 20px;">
    <img src="images/eleven/29.png" id="again" style="width:42%">
    <img src="images/eleven/30.png" id="share" style="width:42%">
   </div>
</div>




</div>
<div id="mask2" style="display: none;">




</div>

<!-- 弹出div -->
<div id="popup" style="display: none;">




</div>
    <div style="display: flex;justify-content: center;align-items: center;flex-direction: column;">

        <img id="start" src="images/nine/23.png" style="position: absolute;top:75%;width:180px" onclick="openPopup()">

    </div>

  
    <script src="js/fireworks.js"></script>

  
    <script src="./js/script.js"></script>
  
    <script>
      var flag=true
function openPopup() {

  updateCountdown(countdownSeconds);
  document.getElementById('mask').style.display = 'block';
  clickEffect();
}
 
function closePopup() {
  document.getElementById('mask').style.display = 'none';

}
function openPopup1() {
  closePopup()
  $('#mask').hide()
 
  document.getElementById('mask1').style.display = 'block';

}
// 设置倒计时时间（单位毫秒）
const countdownTime = 10000;
 
// 显示倒计时的元素
const countdownDisplay = document.getElementById('countdown');
 

// 设置倒计时的秒数
const countdownSeconds = 10;
 
// 更新倒计时的函数
function updateCountdown(secondsRemaining) {
  // 显示倒计时到控制台
 
  countdownDisplay.innerHTML =secondsRemaining
  // 如果剩余时间为0，则不再倒计时
  if (secondsRemaining <= 0) {

    openPopup1()
    $('#cnum').html(clicknum)
    console.log("Countdown finished");
    return; // 结束函数
  }
 
  // 递归调用updateCountdown，用来持续更新倒计时
  setTimeout(function() {
    updateCountdown(secondsRemaining - 1);
  }, 1000); // 每秒钟调用一次updateCountdown函数
}
 
// 开始倒计时

var clicknum=0;



console.log(Math.floor(Date.now() / 1000)); 
let current = new Date();
let hours = current.getHours();
let Month = current.getMonth();
let seconds = current.getSeconds();
// 输出当前时间的小时数（0-23）
if(hours<10)
{
  hours='0'+hours.toString()
}
if(seconds<10)
{  
  seconds='0'+seconds.toString()

}
Month=Month-4
 d=Month.toString()+hours.toString()+seconds.toString()
 console.log(d); 

$('#person').html(d)
      $('#mask').click(function(){
 
        displayRandomImage()
        $('#num').html(clicknum++)
   
    
      })

$('#again').click(function(){
  window.location.href='call.html'
})


var a=0
function displayRandomImage() {

  //Math.floor(Math.random() * (max - min + 1)) + min
 a=Math.floor(Math.random() * 22) + 1

 /*
 a++
if(clicknum>21)
{
  a=1
}

*/
  
  
  
  var imageSrc='images/call/'+a+'.png'
  var $img = $('<img id="ss1">').attr('src', imageSrc).addClass('random-image');
  var imgWidth=''
  $img.load(function(e){

     imgWidth = $('#ss1').width();
    console.log(imgWidth)
    var containerHeight = 500;
    var containerWidth = $('#mask').width();
    var imgHeight = $img.height();
   // var imgWidth = $img.width();
  
    var top = Math.random() * (containerHeight - imgHeight)+100;
    var left = Math.random() * (containerWidth - imgWidth);
    var r=Math.round(Math.random() * 90)/2 - 22
    console.log(r)


    $img.css({
      top: top,
      left: left,
      transform: 'rotate('+r+'deg)'
    });

    $('#mask').append($img);
  })






}

var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    console.log('屏幕高度: ' + screenHeight + 'px');
    if(screenHeight<789)
    {

    //  $('#start').css('top','93%')

    
    }

$('#share').click(function(){
  $('#mask2').show()
})


    </script>


  </body></html>